﻿<!--这个是宽屏横幅幻灯片,默认图片是1200*480 如果不是这个尺寸的话,会很难看-->
<style>
.banner003{position:relative;zoom:1;overflow:hidden;}
.index_b_hero{position:relative;margin:auto;width:1200px;height:480px;}
.index_b_hero img {width:1200px;height:480px;}
.index_b_hero .heros{width:1200px;height:480px;}
.index_b_hero .hero-wrap{position:absolute;overflow:visible;}
.index_b_hero .page_btn{position:absolute;top:210px;z-index:366;width:22px;height:40px;}
.index_b_hero .prev{left:-50px;background:url(<?php echo config('view_replace_str.__STATIC__'); ?>/images/template/images/slide_003/custom_left.png);}
.index_b_hero .next{right:-50px;background:url(<?php echo config('view_replace_str.__STATIC__'); ?>/images/template/images/slide_003/custom_right.png);}
.index_b_hero .hero {position:absolute;top:0;left:0;z-index:1;width:1200px;height:480px;overflow:hidden;}
.index_b_hero .mask-left,#index_b_hero .mask-right{position:absolute;top:0;left:0;z-index:1;width:1200px;height:480px;overflow:hidden;background:#000;filter:alpha(Opacity=30);opacity:.3;}
.index_b_hero .mask-left{left:-1200px;}
.index_b_hero .mask-right{left:1200px;}
.little_img{position:absolute;bottom:0;z-index:50;width:100%;height:93px;background:url(<?php echo config('view_replace_str.__STATIC__'); ?>/images/template/images/slide_003/bg.png);}
.small_list{margin:0 auto;padding:14px 0;width:1200px;overflow:hidden;}
.small_list li{position:relative;float:left;margin-right:11px;width:162px;height:65px;cursor:pointer;}
.small_list li.last{margin-right:0;}
.small_list li img{width:162px;height:65px;}
.small_list li .bg{display:none;position:absolute;top:0;left:0;width:160px;height:63px;border:1px solid #fff;background:url(<?php echo config('view_replace_str.__STATIC__'); ?>/images/template/images/slide_003/bg.png);}
.small_list li.on .bg{display:block;}
</style>

<div class="banner003">

	<div class="index_b_hero">
		<div class="hero-wrap">
			<ul class="heros">
<?php if(is_array($__LIST__) || $__LIST__ instanceof \think\Collection || $__LIST__ instanceof \think\Paginator): $i = 0; $__LIST__ = $__LIST__;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$rs): $mod = ($i % 2 );++$i;?>
				<li class="hero"><a href="<?php echo $rs['url']; ?>"><img class="thumb" src="<?php echo $rs['picurl']; ?>" /></a></li>
<?php endforeach; endif; else: echo "" ;endif; ?>
			</ul>
		</div>
		<div class="helper">
			<div class="mask-left"></div>
			<div class="mask-right"></div>
			<a href="javascript:;" class="page_btn prev"></a>
			<a href="javascript:;" class="page_btn next"></a>
		</div>
	</div>
	
	<div id="lt_ss_tus" class="little_img">
		<ul class="small_list">
<?php if(is_array($__LIST__) || $__LIST__ instanceof \think\Collection || $__LIST__ instanceof \think\Paginator): $i = 0; $__LIST__ = $__LIST__;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$rs): $mod = ($i % 2 );++$i;?>
			<li class="<?php echo $i==1?'on':($i==count($__LIST__)?'last':''); ?>">
				<img id="<?php echo ($i-1); ?>" src="<?php echo $rs['picurl']; ?>" height="65" width="162">
				<div class="bg"></div>
			</li>
<?php endforeach; endif; else: echo "" ;endif; ?>			
		</ul>
	</div>
	
</div>

<script src="<?php echo config('view_replace_str.__STATIC__'); ?>/images/template/images/slide_003/carousel_focus.min.js" type="text/javascript"></script>